
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="产品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品类别" prop="categoryId">
        <el-select
          v-model="queryParams.categoryId"
          placeholder="请选择产品类别"
          style="width: 240px"
        >
          <el-option
            v-for="item in categoriesList"
            :key="item.categoryId"
            :label="item.name"
            :value="item.categoryId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="box">
      <div class="itemBox" v-for="item in dishesList" :key="item.dishId">
        <div v-if="item.isFeatured" class="hot"></div>
        <div class="img">
          <img :src="baseUrl + item.picturePath" alt="" />
        </div>
        <div class="introduct">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="item.name"
            placement="top-start"
          >
            <div class="name">
              产品名称：
              {{ item.name }}
            </div>
          </el-tooltip>

          <el-tooltip
            class="box-item"
            effect="dark"
            :content="item.description"
            placement="top-start"
          >
            <div class="description">适用人群：{{ item.description }}</div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="findCategoryById(item.categoryId)"
            placement="top-start"
          >
            <div class="type">
              类别：{{ findCategoryById(item.categoryId) }}
            </div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="item.nutritionalInfo"
            placement="top-start"
          >
            <div class="healthInfo">产品期限：{{ item.nutritionalInfo }}</div>
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="item.price"
            placement="top-start"
          >
            <div class="price">
              价格：<span style="color: #f05a23">￥{{ item.price }}</span>
            </div>
          </el-tooltip>
          <div style="display: flex; justify-content: space-between">
            <div class="require" @click="showReuqire = true">投保须知</div>
            <div
              v-if="useUserStore().roles[0] === 'common'"
              class="require"
              @click="insure(item)"
            >
              立即投保
            </div>
          </div>
        </div>
        <!-- <div class="buy" @click="addCar(item)">
          <el-icon size="30"><ShoppingCart /></el-icon>
        </div> -->
      </div>
    </div>
    <!-- 购物车 -->
    <el-dialog v-model="showInfo" title="确认信息" width="800">
      <el-form
        label-width="100px"
        :model="currentInsure"
        style="max-width: 600px"
        :rules="rules"
      >
        <el-form-item label="产品信息："> </el-form-item>
        <el-form-item label="产品名称">
          <el-input disabled v-model="currentInsure.name" />
        </el-form-item>
        <el-form-item label="适用人群">
          <el-input disabled v-model="currentInsure.description" />
        </el-form-item>
        <el-form-item label="类别">
          <el-input disabled v-model="currentInsure.categoryId" />
        </el-form-item>
        <el-form-item label="产品期限">
          <el-input disabled v-model="currentInsure.nutritionalInfo" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input disabled v-model="currentInsure.price" />
        </el-form-item>
        <el-form-item label="投保人信息："> </el-form-item>
        <el-form-item label="用户名">
          <el-input disabled v-model="userInfo.userName" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input disabled v-model="userInfo.phonenumber" />
        </el-form-item>
        <el-form-item label="销售员">
          <el-select
            v-model="remark"
            placeholder="请选择销售员"
            style="width: 240px"
          >
            <el-option
              v-for="item in userList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showInfo = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 投保 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 投保须知 -->
    <el-dialog
      v-model="showReuqire"
      title="投保须知"
      width="900"
      :before-close="handleClose"
    >
      <div class="requireBg">
        <p>
          1.请仔细核对您的姓名、身份证号码、联系方式等基本信息，确保准确无误。
        </p>
        <p>
          2.若您为家人或员工投保，请同样确保被保险人的信息准确无误，包括姓名、与投保人的关系、身份证号码等。
        </p>
        <p>
          3.请确认所选保险产品的名称、保险期限、保险金额、保障范围及免责条款等内容，这些将直接影响您的保障权益。
        </p>
        <p>
          4.部分保险产品设有等待期，请在等待期后享受保险保障。同时，请注意保险合同的生效日期，确保在需要时能获得及时保障。
        </p>
        <p>
          5.若发生保险事故，请立即联系我们的客服热线，并按照理赔指南准备相关材料，以便我们尽快处理您的理赔申请。
        </p>
        <p>
          6.我们承诺为您提供专业、高效的服务，期待与您携手共创更加安心的未来。再次感谢您的信任与支持！
        </p>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showReuqire = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup >
import {
  listDishes,
  getDishes,
  delDishes,
  addDishes,
  updateDishes,
} from "@/api/dishes/dishes";
import { listCategories } from "@/api/categories/categories";
import { ElMessage } from "element-plus";
import useUserStore from "@/store/modules/user";
import { listUser, addUser, updateUser, delUser } from "@/api/system/user";
import {
  listOrders,
  getOrders,
  delOrders,
  addOrders,
  updateOrders,
} from "@/api/orders/orders";
import {
  listItems,
  getItems,
  delItems,
  addItems,
  updateItems,
} from "@/api/items/items";
import { computed, ref } from "vue";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const dishesList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const showReuqire = ref(false);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10000,
    name: null,
    description: null,
    price: null,
    categoryId: null,
    nutritionalInfo: null,
    isFeatured: null,
  },
});

const { queryParams, form } = toRefs(data);

const showInfo = ref(false);

const categoriesList = ref([]); //菜品分类列表
const userInfo = ref({
  roleIds: [],
});
const remark = ref("");
const userList = ref([]); //员工列表
const currentInsure = ref({});
const memberRef = ref(null);
const init = async () => {
  const res = await useUserStore().getInfo();
  const { user } = res;
  userInfo.value = user;
};
init();

/** 查询菜品管理列表 */
function getList() {
  loading.value = true;
  listDishes(queryParams.value).then((response) => {
    dishesList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
getList();

const getUserList = async () => {
  const { rows } = await listUser({ pageNum: 1, pageSize: 10000 });
  userList.value = rows.filter((v) => v.roleIds[0] === 6);
  console.log(userList.value);
};

getUserList();

// 获取菜品类别
const getCategoriesList = () => {
  listCategories().then((response) => {
    categoriesList.value = response.rows;
  });
};

getCategoriesList();

const insure = (item) => {
  currentInsure.value = item;
  showInfo.value = true;
  console.log(222, item);
};

// 根据id查找菜品类别
const findCategoryById = (id) => {
  const current = categoriesList.value.filter((v) => v.categoryId === id)[0];
  return current.name;
};

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    dishId: null,
    name: null,
    description: null,
    price: null,
    categoryId: null,
    nutritionalInfo: null,
    isFeatured: null,
    createdAt: null,
    updatedAt: null,
  };
  proxy.resetForm("dishesRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

const confirm = async () => {
  if (remark.value == "") {
    return ElMessage.error("请选择销售员.");
  }
  addOrders({
    orderId: null,
    userId: userInfo.value.userId,
    totalPrice: currentInsure.value.price,
    status: 0,
    createdAt: null,
    updatedAt: null,
    remark: remark.value,
  })
    .then((response) => {
      listOrders(queryParams.value).then((listOrders) => {
        const orderId = listOrders.rows[listOrders.rows.length - 1].orderId;
        addItems({
          orderItemId: null,
          orderId: orderId,
          dishId: currentInsure.value.dishId,
          quantity: 1,
          price: currentInsure.value.price,
          createdAt: null,
          updatedAt: null,
        }).then((response) => {});
      });
      proxy.$modal.msgSuccess("新增成功");
      getList();
      showInfo.value = false;
    })
    .catch((error) => {});
};
</script>


<style lang="less" scoped>
.box {
  border-radius: 12px;
  width: 1200px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  .car {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
  }
}
.itemBox {
  position: relative;
  box-sizing: border-box;
  width: 500px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  height: 180px;
  background-color: #fff;
  margin: 10px;
  margin-left: 60px;
  .hot {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 200px;
    height: 32px;
    text-align: center;
    background: url(../../assets/images/hot.png) no-repeat;
  }
  .img {
    flex-shrink: 0;
    width: 200px;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .introduct {
    padding: 10px;
    width: calc(100% - 200px);
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .price,
    .type,
    .description,
    .name,
    .healthInfo {
      height: 20px;
      line-height: 20px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .buy {
    position: absolute;
    bottom: 5px;
    right: 10px;
    cursor: pointer;
    color: #e09529;
  }
}

.require {
  width: 100px;
  text-align: center;
  color: #fff;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  cursor: pointer;
  background: linear-gradient(to right, #ff9600, #ff5a00);
}
.requireBg {
  padding: 5px;
  background-color: #fff8f5;
}
</style>

